<template>
    <div class="goods-list">
        
        <!-- UI需求：商品每行两个，每个商品模块的大小一致，模块间要有一定的间隔 -->
        <!-- 说明：使用flex布局， 使用justify-content留有空白间隔 -->

        <!-- 功能需求：点击商品跳转到对应的商品信息页面，显示新旧价格，并显示剩余多少件 -->
        <!-- 说明：使用页面url把商品的id传入到商品详情页面，在商品详情页面使用get获取信息 -->
        <div class="goods-item" v-for="item in goodsList" @click="goGoodsInfo(item.id)">
            <img :src="item.imgUrl" alt="">
            <h4 class="">{{item.name}}</h4>
            <div class="info">
                <p class="price">
                    <span class="now-cost">￥{{item.cost}}</span>
                    <span class="old-cost">￥{{item.oldCost}}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{item.remainder}}件</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';

    export default {
        data() {
            return {
                goodsList: []
            }
        },
        created() {
            this.getGoodsList();
        },
        methods: {
            getGoodsList() {
                this.$http.get('/sort/goodsList/phone').then(data => {
                    if (data.status === 200) {
                        this.goodsList = data.body;
                    } else {
                        Toast('加载失败，请稍后再试');
                    }

                }).catch(data => {

                });
            },
            goGoodsInfo(id){
                this.$router.push('/goodsinfo/' +id);
            }
        }
    }
</script>


<style lang="scss" scoped>
    .goods-list {
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        justify-content: space-between;
        background: #ffffff;

        .goods-item {
            width: 49%;
            border: 1px solid #cccccc;
            box-sizing: border-box;
            margin: 3px 0;
            padding:3px;

            h4{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }

            .info {
                background: #eeeeee;

                p {
                    overflow: hidden;
                    margin: 0px;
                    padding: 5px;                  
                }

                .price {
                    .now-cost {
                        color: #ff0000;
                        font-weight: bold;
                        font-size: 16px;
                    }

                    .old-cost {
                        text-decoration: line-through;
                        font-size: 12px;
                        margin-left: 10px;
                    }
                }

                .sell{
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                }
            }

            img {
                width: 100%;
            }
        }


    }
</style>